<template>
	<view style="height: 100vh; background-color: #fff;">
		<view class="content-null" v-if="flagNull">
			暂无考试
		</view>
		<view class="choose-box" v-else>
			<view class="choose" v-for="(item,index) in questionsObj.questions" :key="index">
				<view class="title">
					 <text>[{{item.type == 0 ? '选择题' : item.type == 1 ? '判断题' : '多选题'}}]</text>{{index + 1}}. {{item.content}}
				</view>
				<view class="content" v-if="item.type != 2">
					<view class="xz" v-for="(itemChoose,indexChoose) in item.objArr" :key="indexChoose" @click="chooseItem(item,itemChoose,indexChoose)">
						<text v-if="!itemChoose.flag">{{itemChoose.value.slice(0,1)}}</text>
						<u-icon v-else name="checkmark-circle-fill" color="#62D528" size="46" style="vertical-align: middle; margin-right: 20rpx;"></u-icon>
						{{itemChoose.value.slice(1,itemChoose.value.length)}}
					</view>
				</view>
				<view class="content" v-else>
					<view class="xz" v-for="(itemChoose,indexChoose) in item.objArr" :key="indexChoose" @click="chooseItem(item,itemChoose,indexChoose)">
						<text v-if="!itemChoose.flag">{{itemChoose.value.slice(0,1)}}</text>
						<u-icon v-else name="checkmark-circle-fill" color="#62D528" size="46" style="vertical-align: middle; margin-right: 20rpx;"></u-icon>
						{{itemChoose.value.slice(1,itemChoose.value.length)}}
					</view>
				</view>
			</view>
			<u-button type="primary" :custom-style="customStyleButton" hover-class="none" @click="getExamsScore">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {oneExam,exams,examsUnfinishedExam,examsAnswer,examsScore,exercise} from '../../api/api.js'
	export default {
		data() {
			return {
				customStyleButton:{
					marginTop:'80rpx',
					backgroundColor:'#F18B3A',
					borderRadius: '12rpx',
					height: '88rpx'
				},
				questionsObj:{},
				score:'',
				courseId:'',
				flagNull: false
			}
		},
		onLoad(){
			
		},
		mounted() {
			this.getExercise()
		},
		methods: {
			getExercise(){
				oneExam().then(resp=>{
					if(resp.questions.length == 0){
						this.flagNull = true
					}
					resp.questions.forEach(e=>{
						e.flag = false
						e.optionsArr = e.options.split(',')
						e.objArr = []
						e.optionsArr.forEach((b,index)=>{
							let obj = {
								flag: false,
								value: ''
							}
							if(index == 0){
								obj.value = `A` + b
							}else if(index == 1){
								obj.value = `B` + b
							}else if(index == 2){
								obj.value = `C` + b
							}else{
								obj.value = `D` + b
							}
							e.objArr.push(obj)
						})
					})
					this.questionsObj = resp
				})
			},
			chooseItem(item1,item2,index){
				let parmes = {
					id: this.questionsObj.id,
					questionId: item1.questionId,
					answer: ''
				}
				if(item1.type == 2){
					item2.flag = !item2.flag
					let answer = []
					item1.objArr.forEach(e=>{
						if(e.flag){
							answer.push(e.value.slice(0,1))
						}
					})
					parmes.answer = answer.join('')
				}else{
					item1.objArr.forEach((e,indexDB)=>{
						if(index == indexDB){
							e.flag = true
						}else{
							e.flag = false
						}
					})
					parmes.answer = item2.value.slice(0,1)
				}
				examsAnswer(parmes).then(resp=>{
					
				})
			},
			getExamsScore(){
				let flag = false
				this.questionsObj.questions.forEach(e=>{
					e.choose = false
					e.objArr.forEach(b=>{
						if(b.flag){
							e.choose = true
						}
					})
				})
				this.questionsObj.questions.forEach(e=>{
					if(e.choose){
						flag = true
					}else{
						flag = false
					}
				})
				if(!flag){
					uni.showToast({
						title: '您还有测试题未做完，请认真检查',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `../results/results?id=${this.questionsObj.id}&score=${this.score}&courseId=${this.courseId}`
				})
			},
			getExamsUnfinishedExam(){
				examsUnfinishedExam().then(resp=>{
					resp.questions.forEach(e=>{
						e.flag = false
						e.optionsArr = e.options.split(',')
						e.objArr = []
						e.optionsArr.forEach((b,index)=>{
							let obj = {
								flag: false,
								value: ''
							}
							if(index == 0){
								obj.value = `A` + b
							}else if(index == 1){
								obj.value = `B` + b
							}else if(index == 2){
								obj.value = `C` + b
							}else{
								obj.value = `D` + b
							}
							e.objArr.push(obj)
						})
					})
					this.questionsObj = resp
				})
			},
			// 获取本人未结束的考试
			getExams(id){
				let parmes = {
					examPlanId:id
				}
				exams(parmes).then(resp=>{
					resp.questions.forEach(e=>{
						e.flag = false
						e.optionsArr = e.options.split(',')
						e.objArr = []
						e.optionsArr.forEach((b,index)=>{
							let obj = {
								flag: false,
								value: ''
							}
							if(index == 0){
								obj.value = `A` + b
							}else if(index == 1){
								obj.value = `B` + b
							}else if(index == 2){
								obj.value = `C` + b
							}else{
								obj.value = `D` + b
							}
							e.objArr.push(obj)
						})
					})
					this.questionsObj = resp
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.content-null{
	padding-top: 50rpx;
	text-align: center;
	color: #999;
}
.choose-box{
	border-top: solid 20rpx #f0f0f0;
	padding: 30rpx;
	.choose{
		.title{
			color: #000;
			font-size: 32rpx;
			text{
				color: #F18B3A;
			}
		}
		.content{
			margin-top: 20rpx;
			.xz{
				font-size: 30rpx;
				min-height: 60rpx;
				line-height: 60rpx;
				text{
					font-size: 28rpx;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 38rpx;
					border: 2rpx solid rgba(192, 171, 171, 0.45);
					border-radius: 50%;
					display: inline-block;
					margin-right: 20rpx;
				}
			}
		}
	}
	.answer{
		height: 40rpx;
		line-height: 40rpx;
		border-left: solid 6rpx #F18B3A;
		padding-left: 20rpx;
		font-weight: 600;
		font-size: 32rpx;
	}
	.answer-box{
		border:none;
		padding-left: 0;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 50rpx;
	}
}
</style>
